<style lang="scss" scoped>
.hd{
  padding: 50rpx 60rpx;
  text-align: center;
  .page-title{
    font-size: 50rpx;
    margin-bottom: 20rpx;
    color: $fun-primary-color;
  }
  .page-desc{
    color: #b1b1b1;
  }
}
.bd{
  padding: 0 60rpx 50rpx;
  .word-box{
    .word-question{
      padding:0 0 30rpx 0;
    }
    .word-opt-item{
      margin-bottom: 30rpx;
    }
  }
}

.gif{
  position: fixed;
  left:50%;
  transform: translateX(-50%);
  bottom: 10%;

  animation: ease 0.3s all;

  .success-gif{
    width: 550rpx;
    vertical-align: bottom;
  }
}
</style>
<template>
<div class="page-wrap">
  <div class="hd">
    <div class="page-title">公益背单词</div>
    <div class="page-desc">背单词积攒积分,支持公益事业</div>
  </div>
  <div class="bd" v-if="info.id">
    <div class="word-box">
      <div class="word-question m-b-20">与 <span class="text-underline color-green p-l-10 p-r-10">{{info.word}}</span> 相符的选项是</div>
      <div class="word-opt-item"><u-button :type="getOptType('A')" ripple @click="selectOpt('A')">{{info.opt_a}}</u-button></div>
      <div class="word-opt-item"><u-button :type="getOptType('B')" ripple @click="selectOpt('B')">{{info.opt_b}}</u-button></div>
      <div class="word-opt-item"><u-button :type="getOptType('C')" ripple @click="selectOpt('C')">{{info.opt_c}}</u-button></div>
      <div class="word-opt-item"><u-button :type="getOptType('D')" ripple @click="selectOpt('D')">{{info.opt_d}}</u-button></div>
    </div>
<!--    <div class="word-action p-t-20">-->
<!--      <u-button type="success" :disabled="answer?false:true" @click="submitFn">提交</u-button>-->
<!--    </div>-->
    <div class="gif" :style="{opacity:showGif?1:0,zIndex:showGif?9:-9}">
      <image mode="widthFix" src="https://qingclouds-server.oss-cn-shanghai.aliyuncs.com/6efa8e1b709457fd/700371904f69dcea.gif" class="success-gif"></image>
    </div>
  </div>
</div>
</template>

<script>
import { pageMixin } from '@/mixins'
import { Exception } from '@/common/Exception'
import { getRandomQuestion, checkQuestion } from '@/api'
import { error, hideLoading, showLoading, toast } from '@/common/fun'
import UButton from '@/uview-ui/components/u-button/u-button'
import { checkIsLogin, sleep } from '@/common/helper'
import { objTranslate } from '../../common/helper'

export default {
  components: { UButton },
  mixins: [pageMixin],
  data () {
    return {
      showGif: false,
      isCheckDone: false,
      answer: '',
      info: {},
      temp_info: {}
    }
  },
  methods: {
    getOptType (type) {
      if (!this.isCheckDone) {
        return this.answer === type ? 'success' : 'default'
      } else {
        if (type === this.info.answer) {
          return 'success'
        } else {
          if (type === this.answer) {
            return 'error'
          } else {
            return 'default'
          }
        }
      }
    },
    selectOpt (val) {
	  if(this.isCheckDone)return
	  this.isCheckDone = true
      this.answer = val
      this.submitFn()
    },
    async submitFn () {
      // this.isReq = true
      await checkQuestion({ id: this.info.id, answer: this.answer }).then(res => {
        if (res.data.action_code === 1) {
          toast(res.msg, 'none')
          this.showGif = true
        } else {
          error(res.msg, 'none')
        }
      }).catch(err => {
        Exception.handle(err)
      })

      this.isCheckDone = true

      await sleep(1500)

      this.showGif = false
      this.isCheckDone = false
      this.info = {}

      // await new Promise(resolve => {
      //   setTimeout(() => {
      //     this.answer = ''
      //     resolve(true)
      //   }, 150)
      // })
      await sleep(50)
      this.answer = ''
      await sleep(50)

      await this.randomLoadQuestion()
    },
    async randomLoadQuestion () {
      var result = {}
      if (this.temp_info && JSON.stringify(this.temp_info) !== '{}') {
        result = objTranslate(this.temp_info)
        this.temp_info = {}
      } else {
        result = await getRandomQuestion({ type: this.type }, { tip: 'loding' }).then(res => res.data).catch(err => { Exception.handle(err) })
      }
      this.info = result

      // 获取问题目，直接获取第二个
      const result2 = await getRandomQuestion({ type: this.type }).then(res => res.data).catch(err => { Exception.handle(err) })
      this.temp_info = result2
    },
    async _init_func (opt) {
      showLoading()
      await this.randomLoadQuestion()
      hideLoading()
    }
  },
  onLoad (options) {
    this.type = options.type
    this._init_func(options)
    if (!checkIsLogin(0, 0)) {
      uni.$on('login_call', () => {
        this._init_func(options)
      })
    }
  }
}
</script>
